<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../../../component/elementUI/index.css">
    <link rel="stylesheet" href="config/css/config.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/free.css">
    <style>
        ::-webkit-scrollbar {
            display: none;
            /* 或者 width: 0; height: 0; */
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div id="configtest"></div>
        <!-- 组件 -->
        <div style="height: 50px; background-color: #409EFF;display: flex; align-items: center; justify-content: end;">
            <div style="margin-right: 50px;">
                <el-button size="small" @click="window.history.back()">返回</el-button>
                <el-button size="small" :loading="loading" @click="sumbit" type="success">提交</el-button>
            </div>
        </div>
        <el-row>
            <el-col :span="2.5">
                <div style="width: 100%; height: calc(100vh - 50px);">
                    <div>组件</div>
                    <div style=" width: 200px; display: flex; flex-wrap: wrap; justify-content: space-between;">
                        <div @click="handle(item)" v-for="(item,index) in data" :key="index"
                            style="text-align: center; line-height: 60px; margin-top: 10px; width: 60px; height: 60px; background-color: #409EFF; color:#fff">
                            {{item.name}}</div>
                    </div>
                    
                    <!-- <div class="px-2 py-1 bg-warning mb-1" @click="handle(item)" v-for="(item,index) in data" :key="index">
                        {{item.name}}
                    </div> -->
                </div>
            </el-col>
            <el-col :span="10">
                <!--   -->
                <div style="position: relative;display: flex;justify-content: center; margin: auto; width: 700px; flex-shrink: 1;
                    background-color: #e0e0e0; height:calc(100vh - 50px);">
                    <div id="test" style="position: absolute;z-index: 9; margin: auto; width:375px;height:100%; background-color: antiquewhite; overflow-y: scroll;">
                        <render :data="form"></render>
                            <!-- 顶部导航栏 -->
                            <!-- <div style="background-color: #f5f5f5; width: 100%; height: 25px;">
                                <div style="display: flex;justify-content: space-between; height: 100%;">
                                    
                                    <div style="display: flex; align-items: center; justify-content: space-between; width: 120px;">
                                        <div style="display: flex;align-items: center; justify-content: space-between; width: 120px; height: 100%;">
                                            <span style="margin-left: 5px; font-size: 12px;color: #28a745; cursor:pointer">请登录</span>
                                            <span style="font-size: 12px;color: #828d96; cursor: pointer;">免费注册</span>
                                        </div>
                                    </div>
                                 
                                    <div style="display: flex;align-items: center;justify-content: space-between;width: 190px;">
                                        <div style="display: flex; justify-content: center; align-items: center; font-size: 12px;">
                                            <i class="el-icon-location-outline"></i>
                                            黑龙江省哈尔滨市香坊区
                                        </div>
                                    </div>
                                </div>
                            </div> -->
                            
                            <!-- logo -->
                            <!-- <div style="width: 100%; height: 50px; background-color: #28a745;">
                                <div style="display: flex;align-items: center; position: relative; height: 100%;margin: 0 30rpx;">
                                    <div style="display: flex;align-items: center;cursor: pointer;">
                                        <el-image src="./img/t1.png" style="width: 50px; height: 50px;" fit="cover"></el-image>
                                        <el-image src="./img/t1.png" style="width: 50px; height: 50px; margin-left: 5px;" fit="cover"></el-image>
                                        <div style="margin-left: 25px; color: white; font-size: 1.5rem;">产业互联网平台</div>
                                    </div>
                                </div>
                            </div> -->
                            <!-- 导航条 -->
                            <!-- <div style="display: flex;background-color: white;border-top:0.5px solid #dee2e6;
                                border-bottom:0.5px solid #dee2e6; width: 100%; height: 50px; justify-content: space-between; align-items: center;">
                                
                                <div style="display: flex; justify-content: center; align-items: center; width: 70%;">
                                    <div style="display: flex;">
                                        <div style="width: 75%; padding-left: 10px; display: flex; align-items: center; 
                                            border:2.5px solid #28a745; box-sizing: border-box;">
                                            <input type="text" placeholder="请输入内容"
                                                style="border: none; width: 100%;height: 80%;" v-model="input2">
                                        </div>
                                        <div style="display: flex;justify-content: center;align-items: center;border:2.5px solid #28a745 ;
                                            box-sizing: border-box; width: 25%; background-color: #28a745;">
                                            <span style="cursor: pointer;font-size: 12px; color: white;">搜索</span>
                                        </div>
                                    </div>
                                </div>
                                
                                <div style="margin: 0 5px;width: 30px;height: 30px;border: 1px solid aliceblue; 
                                    border-radius: 5px;background-color: aliceblue;line-height: 30px;position: relative;">
                                    <i style="font-size: 30px;" class="el-icon-s-operation"></i>
                                </div>
                            </div> -->
                        
                        <!-- 轮播图 -->
                        <!-- <div style="background-color: #eaeaea; padding: 10px 0;">
                            <div style="height: 190px;">
                                <Swiper :data="text"></Swiper>
                            </div>
                        </div> -->
                        <!-- 两大板块 -->
                        <!-- <div style="margin:5px 0;padding: 0 10px;">
                            <div style="border-radius: 10px;margin-bottom: 10px; padding: 5px 0; display: flex; overflow: hidden;justify-content: space-around;
                                flex-wrap: wrap; flex-direction: column; width: 100%; background-image: url('./img/bkbjt.png');background-size: cover;">
                                <div style="display: flex; justify-content: space-around;align-items: center;padding-top: 22px;
                                    width: 90%;margin: 0 auto;color: white;">
                                    <div style="padding: 5px 20px;cursor: pointer; color: green;background-color: white; font-weight: bold; font-size: 20px; border-radius: 5px;">
                                        营销中心
                                    </div>
                                    <div style="padding: 5px 20px;cursor: pointer; font-weight: bold; font-size: 20px; border-radius: 5px;">
                                        服务中心
                                    </div>
                                </div>
                                <div style="padding: 25px 0 15px 0;">
                                    <div v-if="true">
                                        <div style="display: flex; width: 100%;justify-content: space-around;flex-wrap: wrap;">
                                            <div style="display: flex; flex-direction: column; align-items: center;flex-shrink: 0;" v-for="i in 4" :key="i">
                                                <div style="width: 30px;height:30px;">
                                                    <el-image style="width: 100%;height: 100%; vertical-align: middle" src="./img/gximg1.jpg" fil="cover" class="img"></el-image>
                                                </div>
                                                <div style="font-size: 14px; color:white;font-weight: bold;"> 产品商城 </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div> -->
                        <!-- 服务热线 -->
                        <!-- <div style="border-radius: 7px;background-color: white; margin: 10px 10px 0 10px;padding: 10px;">
                            <div style="display: flex; font-size: 18px; align-items: center; color: green;font-weight: bold;">
                                <div style="margin-right: 50px;">服务热线</div>
                                <i class="el-icon-phone"></i>400-9667-365
                            </div>
                        </div> -->
                        <!-- 咨询中心 -->
                        <!-- <div style="padding: 0 10px;">
                            <div style="display: flex; margin: 15px 0;justify-content: center; width: 100%;">
                                <div style="display: flex; align-items: center; background-color: white;border-radius: 10px;width: 100%;height: 75px;">
                                    <div style="background-color: #28a745;border-radius:10px 0 0 10px;font-weight: bold;
                                        padding: 11px 0; width: 90px; box-sizing: border-box; height: 100%;display: flex;flex-direction: column;justify-content: space-evenly;">
                                        <div style="text-align: center;color: white;">咨询</div>
                                        <div style="text-align: center;color: white;">中心</div>
                                    </div>
                                </div>
                            </div>
                        </div> -->
           
                        <!-- <div style="padding: 0 10px; display: flex; flex-direction: column;">
                            <div style="display: flex; margin: 10px 0; justify-content: space-between;">
                                <div style="display: flex; align-items: center; justify-content: center; background-color: white;
                                    border-radius: 5px; width: 24%; padding: 10px; border-bottom: 4px solid #AFDEAF;">
                                        <span>热门供应</span>
                                </div>
                                <div style="display: flex; align-items: center; justify-content: center; background-color: white;
                                    border-radius: 5px; width: 24%; padding: 10px;">
                                        <span>今日采购</span>
                                </div>
                                <div style="display: flex; align-items: center; justify-content: center; background-color: white;
                                    border-radius: 5px; width: 24%; padding: 10px;">
                                        <span>好货推荐</span>
                                </div>
                            </div>
                            <div>
                                <div style="margin-bottom: 10px;">
                                    <div style="width: 100%;border-radius: 10px;position: relative; background-color: #f5f5f5; display: flex; flex-direction: column;">
                                        <div style="margin: 10px; position: relative;">
                                            <span style="font-size: 18px; font-weight: bold;">热门供应</span>
                                            <span style="font-size: 10px; color: #343a40;cursor: pointer;position: absolute;right: 0;">
                                                更多<i class="el-icon-arrow-right"></i>
                                            </span>
                                        </div>
                                        <div style="display: flex; margin: 0 10px 20px 10px; height: 100%;">
                                            <div style="margin-top: 10px; width: 100%;">
                                                <el-carousel indicator-position="none" arrow="always" height="150px">
                                                    <el-carousel-item v-for="item in 4" :key="item">
                                              
                                                        <div style="display: flex; flex-direction: column; margin-right: 10px; border-radius: 10px; background-color: white; padding: 10px 0; 
                                                            width: 100%; position: relative; flex-shrink: 0; height: 100%;">
                                                            <div style="border-radius: 5px; padding: 5px; display: flex; align-items: center; justify-content: center; background-color: #28a745;
                                                                position: absolute; top: 0; left: 0;">
                                                                    <span style="font-size: 8px; color: white;">预包装</span> 
                                                            </div>
                                                            <div style="display: flex;justify-content: space-between; padding: 10px 10px 0 10px; align-items: center;">
                                                                <div style="font-size: 10px;">
                                                                    <span style="width: 72.5px;color: gray;">所属企业：</span>
                                                                    <span>黑龙江小康龙江集团有限公司</span>
                                                                </div>
                                                            </div>
                                                            <div style="font-size: 10px; width: 70%; position: relative; flex-shrink: 0;height: 100%;">
                                                                <div style="flex-shrink: 1; border-radius: 10px; width: 100px;height: 100px;">
                                                                    <el-image src="./img/t1.png" style="border-radius: 10px; width: 100%; height: 100%;" fit="cover"></el-image>
                                                                </div> 
                                                                <div style="font-size: 10px ;">

                                                                </div>
                                                                <span style="width: 72.5px;color: gray; width: 43%;">供应品种:</span>
                                                            </div>
                                                        </div>
                                                    </el-carousel-item>
                                                </el-carousel>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div> -->
                    </div>
                </div>
            </el-col>
            <el-col :span="10">
                <div style="margin: auto; width: 771px; height: calc(100vh - 50px); overflow-y:scroll;">
                    <div class="table_titel">
                        <div class="titel">
                            配置属性{{SelectElement?'(当前选中'+SelectElement+')':''}}
                            <i @click="environment(1)" class="el-icon-mobile-phone"></i>
                            <i @click="environment(2)" class="el-icon-monitor"></i>
                        </div>
                        <div class="operation">
                            <el-button :type="isSwitch?'danger':'success'" size="small"
                                @click="hadnlelayer">{{isSwitch?'取消':'布局拖拽'}}</el-button>
                            <el-button type="primary" size="small" @click="handle1">恢复</el-button>
                        </div>
                    </div>
                    <form style="width: 100%; display: flex;  flex-direction: column;">
                        <render-config :data="form"></render-config>
                    </form>
                </div>
            </el-col>
        </el-row>
    </div>
    
    <script src="../../../utils/vue.min.js"></script>
    <script src="../../../utils/vuex.min.js"></script>
    <script src="../../../component/elementUI/index.js"></script>
    <script src="../../../utils/jquery-3.6.0.min.js"></script>
    <script src="../../../utils/jquery.cookie.js"></script>
    <script src="../../../utils/compressor.js"></script>
    <script src="../../../utils/Sortable.min.js"></script>
    <script src="../../../utils/hls.js"></script>
    <script src="../../../utils/utils.js"></script>
    <script src="../../../utils/jquery.qrcode.min.js"></script>
    <script src="../../../utils/websocket.js"></script>
    <!-- 组件配置 -->
    <script src="config/store.js"></script>
    <script src="config/utils.js"></script>
    <!-- 组件 -->
    <script src="config/component/Swiper.js"></script>
    <script src="config/component/LayOut.js"></script>
    <script src="config/component/Card.js"></script>
    <script src="config/component/LiveBroadcast.js"></script>
    <script src="config/component/NavItem.js"></script>
    <script src="config/component/Table.js"></script>
    <script src="config/component/Form.js"></script>
    <script src="config/component/Tab.js"></script>
    <script src="config/component/ShopList.js"></script>
    <script src="config/component/PlateCore.js"></script>
    <script src="config/component/Pic.js"></script>
    <script src="config/component/TextBox.js"></script>
    <script src="js/Config.m.js"></script>
</body>

</html>